<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- <meta http-equiv="Content-Security-Policy" content="script-src  'self' 'unsafe-inline' 'unsafe-eval' http://oppo.miage.com.cn;"> -->
  @@include('web/include/header.html')
  <title>2017 OPPO移动开发者大会</title>
  <link rel="stylesheet" type="text/css" href="web/public/fullPage.js-master/jquery.fullPage.css" />
  <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
  <link type='text/css' rel='stylesheet' href='web/css/index.css?rev=@@hash'>
</head>

<body style="background:#05050f">
  <img class="p-f" src="http://oppo.miage.com.cn/web/img/oppo.jpg" style="z-index:-1000; width:0px; height:0px; left:-100%; top:-100%; display:block;">
  <div id="fullpage" style='opacity:0;'>
    <div id='fixTop' class='fixTop d-b p-f'>
      <!-- <img id="oppo" class="d-b p-a" src="web/img/LOGO.png?rev=@@hash"> -->
      <div id="play" class="play_music d-b p-a">
        <audio id='music' loop="loop" style="width:0; height:0;" autoplay="autoplay">
          <source type="audio/mpeg" src="web/mp3/mp3.mp3">
        </audio>
      </div>
    </div>

    <div class="section section1">
      <img class="oppo d-b p-a" src="web/img/LOGO.png?rev=@@hash">
      <img class="text1 d-b p-a" src="web/img/img1/text1.png?rev=@@hash">
      <img class="text2 d-b p-a" src="web/img/img1/text2.png?rev=@@hash">
      <img class="text3 d-b p-a" src="web/img/img1/text3.png?rev=@@hash">
      <img class="house d-b p-a" src="web/img/img1/tu1.png?rev=@@hash">
      <div class="u-arrow-bottom">
        <div class="pre-wrap-bottom">
          <div class="pre-box1">
            <div class="pre1"></div>
          </div>
          <div class="pre-box2">
            <div class="pre2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="section section2">
      <img class="oppo d-b p-a" src="web/img/LOGO.png?rev=@@hash">
      <img class="text1 d-b p-a" src="web/img/img2/text1.png?rev=@@hash">
      <img class="text2 d-b p-a" src="web/img/img2/text2.png?rev=@@hash">
      <img class="text3 d-b p-a" src="web/img/img2/text3.png?rev=@@hash">
      <img class="line d-b p-a" src="web/img/img2/line.png?rev=@@hash">
      <img class="text4 d-b p-a" src="web/img/img2/text4.png?rev=@@hash">
      <div class="u-arrow-bottom">
        <div class="pre-wrap-bottom">
          <div class="pre-box1">
            <div class="pre1"></div>
          </div>
          <div class="pre-box2">
            <div class="pre2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="section section3">
      <img class="oppo d-b p-a" src="web/img/LOGO.png?rev=@@hash">
      <img class="text1 d-b p-a" src="web/img/img2/text1.png?rev=@@hash">
      <img class="text2 d-b p-a" src="web/img/img3/text2.png?rev=@@hash">
      <img class="text3 d-b p-a fadeInUp" src="web/img/img3/text3.png?rev=@@hash">
      <img class="line d-b p-a fadeInUp" src="web/img/img2/line.png?rev=@@hash">
      <img class="text4 d-b p-a" src="web/img/img2/text4.png?rev=@@hash">
      <div class="u-arrow-bottom">
        <div class="pre-wrap-bottom">
          <div class="pre-box1">
            <div class="pre1"></div>
          </div>
          <div class="pre-box2">
            <div class="pre2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="section section4">
      <img class="oppo d-b p-a" src="web/img/LOGO.png?rev=@@hash">
      <img class="text1 d-b p-a" src="web/img/img4/text1.png?rev=@@hash">
      <img class="map1 d-b p-a" src="web/img/img4/map1.png?rev=@@hash">
      <img class="map2 d-b p-a" src="web/img/img4/map2.png?rev=@@hash">
      <img class="text2 d-b p-a" src="web/img/img4/text2.png?rev=@@hash">
      <img class="text4 d-b p-a" src="web/img/img2/text4.png?rev=@@hash">
      <div class="u-arrow-bottom">
        <div class="pre-wrap-bottom">
          <div class="pre-box1">
            <div class="pre1"></div>
          </div>
          <div class="pre-box2">
            <div class="pre2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="section section5 p-r ">
      <img class="oppo d-b p-a" src="web/img/LOGO.png?rev=@@hash">
      <img class="text1 d-b p-a" id="section5_text1" src="web/img/img1/text1.png?rev=@@hash">
      <img class="text2 d-b p-a" id="section5_text2" src="web/img/img5/text1.png?rev=@@hash">
      <!-- <img class="go_next button1 d-b p-a" src="web/img/img5/button1.png?rev=@@hash"> -->
      <div class='back back1 nd-b p-a' id="back1"><div class='backIcon d-b'></div></div>
      <div class='go_next button1 btn d-b p-a' id="section5_go_next">点我报名</div>
      <input class="check_mobile input_text nd-b p-a" id="section5_check_mobile" type="number" placeholder="电话" onkeyup="onlyNum(this)" maxlength="11">
      <div class='check btn d-b p-a' id="section5_check">报名查询</div>
      <img class="text3 d-b p-a" src="web/img/img5/text2.png?rev=@@hash">
      <div class='modal2 nd-b p-a'>
        <div class='white_box2 d-b'>
          <img class="sucess2 nd-b" src="web/img/img6/sucess.jpg?rev=@@hash">
          <div class="sucess_text2 nd-b">
            您的资料已提交，审核结果将以短信形式通知您！
          </div>
        </div>
        <div class='close_box2 d-b'>关闭</div>
      </div>
      <div class='modal_bg2 nd-b p-a'></div>
    </div>
  </div>

  <div class='add_page p-f nd-b'>
    <img class="oppo d-b p-a" src="web/img/LOGO.png?rev=@@hash">
    <img class="text1 d-b p-a" id="text1" src="web/img/img6/text1.png?rev=@@hash">
    <div class='back back2 d-b p-a' id="back2"><div class='backIcon d-b'></div></div>
      <div class='form d-b p-a' id="form">
        <input class="name input_text d-b" type="text" placeholder="姓名">
        <input class="mobile input_text d-b" type="number" placeholder="电话" onkeyup="onlyNum(this)" maxlength="11">
        <input class="company input_text d-b" type="text" placeholder="公司名称">
        <input class="products input_text d-b" type="text" placeholder="公司产品名称">
        <select class="type d-b">
          <option value="" disabled selected>专场选择</option>
          <option value="游戏专场">游戏专场</option>
          <option value="应用专场">应用专场</option>
        </select>
        <div class='submit btn d-b'>点击提交</div>
      </div>
      <img class="text4 d-b p-a" id="add_page_text4" src="web/img/img2/text4.png?rev=@@hash">
      <div class='modal nd-b p-a'>
        <div class='white_box d-b'>
          <img class="sucess nd-b" src="web/img/img6/sucess.jpg?rev=@@hash">
          <div class="sucess_text nd-b">
            您的资料已提交，审核结果将以短信形式通知您！
          </div>
        </div>
        <div class='close_box d-b'>关闭</div>
      </div>
      <div class='modal_bg nd-b p-a'></div>
    </div>

    <div class='user_pass nd-b p-f'>
      <img class="oppo d-b p-a" src="web/img/LOGO.png?rev=@@hash">
      <img class="text1 d-b p-a" src="web/img/img1/text1.png?rev=@@hash">
      <img class="text2 d-b p-a" src="web/img/img1/text2.png?rev=@@hash">
      <p class='text3 d-b p-a ta-c'>诚邀VIP</p>
      <p class='text4 name d-b p-a ta-c'>曹俊杰</p>
      <p class='text5 time d-b p-a ta-c'>游戏专场 09:30 - 11:45</p>
      <p class='text6 address d-b p-a ta-c'>三里屯通盈中心洲际酒店 · 4层洲际宴会大厅 </p>
    </div>
  </div>

  <script src='web/public/jquery/jquery-1.11.1.min.js'></script>
  <script src="web/public/fullPage.js-master/vendors/jquery.easings.min.js"></script>
  <script type="text/javascript" src="web/public/fullPage.js-master/vendors/scrolloverflow.js"></script>
  <script type="text/javascript" src="web/public/fullPage.js-master/jquery.fullPage.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  <script>
  function onlyNum(obj) {
    obj.value = obj.value.replace(/[^\d-]/g, ""); //清除“数字”和“.”以外的字符
  };
  $(function() {
    var winH = $(window).height();

      $(".form input").click(function(){
        document.getElementById("form").style.WebkitTransform = "translateY(-50px)";
        document.getElementById("text1").style.WebkitTransform = "translateY(-80px)";
        document.getElementById("fixTop").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("back1").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("back2").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("add_page_text4").style.WebkitTransform = "translate(-10%,80px)";
      });

      $(".form input").focus(function(){
        document.getElementById("form").style.WebkitTransform = "translateY(-50px)";
        document.getElementById("text1").style.WebkitTransform = "translateY(-80px)";
        document.getElementById("fixTop").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("back1").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("back2").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("add_page_text4").style.WebkitTransform = "translate(-10%,80px)";
      });

      $(".form input").blur(function(){
        document.getElementById("form").style.WebkitTransform = "translateY(0px)";
        document.getElementById("text1").style.WebkitTransform = "translateY(0px)";
        document.getElementById("fixTop").style.WebkitTransform = "translateY(0px)";
        document.getElementById("back1").style.WebkitTransform = "translateY(0px)";
        document.getElementById("back2").style.WebkitTransform = "translateY(0px)";
        document.getElementById("add_page_text4").style.WebkitTransform = "translate(-10%,0px)";
      });

      $('#section5_check_mobile').click(function(){
        document.getElementById("section5_text1").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_text2").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_go_next").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_check_mobile").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_check").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("fixTop").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("back1").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("back2").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("add_page_text4").style.WebkitTransform = "translate(-10%,80px)";
      });

      $("#section5_check_mobile").focus(function(){
        document.getElementById("section5_text1").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_text2").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_go_next").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_check_mobile").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_check").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("fixTop").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("back1").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("back2").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("add_page_text4").style.WebkitTransform = "translate(-10%,80px)";
      });

      $("#section5_check_mobile").blur(function(){
        document.getElementById("section5_text1").style.WebkitTransform = "translateY(0px)";
        document.getElementById("section5_text2").style.WebkitTransform = "translateY(0px)";
        document.getElementById("section5_go_next").style.WebkitTransform = "translateY(0px)";
        document.getElementById("section5_check_mobile").style.WebkitTransform = "translateY(0px)";
        document.getElementById("section5_check").style.WebkitTransform = "translateY(0px)";
        document.getElementById("fixTop").style.WebkitTransform = "translateY(0px)";
        document.getElementById("back1").style.WebkitTransform = "translateY(0px)";
        document.getElementById("back2").style.WebkitTransform = "translateY(0px)";
        document.getElementById("add_page_text4").style.WebkitTransform = "translate(-10%,0px)";
      });
    $(window).resize(function() {
      //当页面宽度变化时

      var winH2 = $(window).height();
      if(winH>winH2){
        document.getElementById("form").style.WebkitTransform = "translateY(-50px)";
        document.getElementById("text1").style.WebkitTransform = "translateY(-80px)";

        document.getElementById("section5_text1").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_text2").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_go_next").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_check_mobile").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("section5_check").style.WebkitTransform = "translateY(-100px)";

        document.getElementById("fixTop").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("back1").style.WebkitTransform = "translateY(-100px)";
        document.getElementById("back2").style.WebkitTransform = "translateY(-100px)";

        document.getElementById("add_page_text4").style.WebkitTransform = "translate(-10%,80px)";
      }else{
        document.getElementById("form").style.WebkitTransform = "translateY(0px)";
        document.getElementById("text1").style.WebkitTransform = "translateY(0px)";

        document.getElementById("section5_text1").style.WebkitTransform = "translateY(0px)";
        document.getElementById("section5_text2").style.WebkitTransform = "translateY(0px)";
        document.getElementById("section5_go_next").style.WebkitTransform = "translateY(0px)";
        document.getElementById("section5_check_mobile").style.WebkitTransform = "translateY(0px)";
        document.getElementById("section5_check").style.WebkitTransform = "translateY(0px)";

        document.getElementById("fixTop").style.WebkitTransform = "translateY(0px)";
        document.getElementById("back1").style.WebkitTransform = "translateY(0px)";
        document.getElementById("back2").style.WebkitTransform = "translateY(0px)";

        document.getElementById("add_page_text4").style.WebkitTransform = "translate(-10%,0px)";
      }

      (function IsPC() {
        //判断是 移动端 还是 PC
        for (var userAgentInfo = navigator.userAgent, Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"], flag = !0, v = 0; v < Agents.length; v++)
          if (userAgentInfo.indexOf(Agents[v]) > 0) {
            console.log('移动');

            document.getElementsByTagName('html')[0].style.fontSize = window.screen.width / 5 + 'px';
            //body字体大小为页面宽度除以 10

            return
          }
        //console.log('PC');
        $("body").css({width:"750px",margin:"0 auto"});
        $("html").css("font-size","150px");
        document.getElementsByTagName('html')[0].style.fontSize = 75 + 'px';
        /*
          设置页面 html 文字根字号大小为37.5，为了让 less 好计算
          这样 less 里的数值是多少就是多少 px了
        */

        return
      })();
    });

    (function IsPC() {
        //判断是 移动端 还是 PC
        for (var userAgentInfo = navigator.userAgent, Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"], flag = !0, v = 0; v < Agents.length; v++)
          if (userAgentInfo.indexOf(Agents[v]) > 0) {
            console.log('移动');

            document.getElementsByTagName('html')[0].style.fontSize = window.screen.width / 5 + 'px';
            //body字体大小为页面宽度除以 10

            return
          }
        //console.log('PC');
        $("body").css({width:"750px",margin:"0 auto"});
        $("html").css("font-size","150px");
        document.getElementsByTagName('html')[0].style.fontSize = 75 + 'px';
        /*
          设置页面 html 文字根字号大小为37.5，为了让 less 好计算
          这样 less 里的数值是多少就是多少 px了
        */
        return
      })();

  });
  </script>
  <script src='web/js/index2.js?rev=@@hash'></script>
</body>

</html>